<template>
	<view>
		<carHeader :title="'已取消订单'"></carHeader>
		<!-- 订单信息 -->
		<view class="info" style="margin-top: 30rpx;">
			<!-- 第一个卡片上方内容 -->
			<view class="info-title">
				<view style="font-size: 36rpx;color: #242424;">订单信息</view>
				<view style="color:#FF5520 ;font-size: 28rpx;">已取消</view>
			</view>
			<!-- 分割线 -->
			<view class="line"></view>
			<!-- 订单信息 -->
			<view>
				<view class="info-content">订单号：{{orderMessage.orderId}}</view>
				<view class="info-content">服务项目：{{orderMessage.program}}</view>
				<view style="display: flex;">
					<view class="info-content">服务门店：{{orderMessage.shop}}</view>
					<image style="width: 30rpx; margin-left: 30rpx;" src="../../static/车联网服务-01专业洗车1slices/plane@2x.png"
						mode="widthFix"></image>
				</view>
				<view class="info-content">下单时间：{{orderMessage.orderTime}}</view>
				<view class="info-content">预约时间：{{orderMessage.appointmentTime}}</view>
				<view class="info-content">备注：{{orderMessage.remarks}}</view>
			</view>

		</view>
		
		<!-- 订单详情 -->
		<view class="info" style="margin-top: 30rpx;">
			<!-- 第一个卡片上方内容 -->
			<view class="info-title">
				<view style="font-size: 36rpx;color: #242424;">订单详情</view>
			</view>
			<!-- 分割线 -->
			<view class="line"></view>
			<!-- 订单详情信息 -->
			<view>
				
				
				<view class="details-content">
					<view>车辆精洗</view>
					<view>￥{{orderDetails.cleanCar}}</view>
				</view>
				<view class="details-content">
					<view>车辆附加费用</view>
					<view>{{orderDetails.chargeFee}}</view>
				</view>
				<view class="line2"></view>
				<view class="details-content">
					<view>原价</view>
					<view>￥{{orderDetails.price}}</view>
				</view>
				<view class="details-content">
					<view>店家优惠</view>
					<view class="red">-￥{{orderDetails.shopDiscount}}</view>
				</view>
				
				<!-- 分割线 -->
				<view class="line2"></view>
				<view class="details-content">
					<view>优惠券</view>
					<view class="red">-￥{{orderDetails.coupon}}</view>
				</view>
				<!-- 分割线 -->
				<view class="line"></view>
				<view class="details-content">
					<view>支付金额</view>
					<view class="green">
						￥{{orderDetails.payment}}</view>
					</view>
				</view>
				
		
		</view>

		<!-- 底部联系客服 -->
		<view class="bottom">
			<view class="bottom-left">
				<image style="width: 55rpx;" src="../../static/车联网服务-01专业洗车1slices/客服@2x.png" mode="widthFix"></image>
				<view>联系客服</view>
			</view>
			<view class="bottom-right">
				<button style="background: linear-gradient(to right, #3789FF,#0762E6); border:none;">再来一单</button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderMessage: { //订单信息对象
					orderId: 121212112487878, //订单号
					program: '车辆保养', //服务项目
					shop: '大宝车辆维修店', //服务门店
					orderTime: '2023-03-08 17:40', //下单时间
					appointmentTime: '2023-03-08 17:40', //预约时间
					remarks: '', //备注
				},
				orderDetails:{
					cleanCar: 39.90 ,//车辆精洗
					chargeFee: 0,//车辆附加费用
					price: 59.90,//原价
					shopDiscount: 20, //店家优惠
					coupon: 10,  //优惠券
				    payment: 29.9,//支付金额
					
				}


			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	// 订单信息卡片
	.info {
		background-color: white;
		color: #414141;
		width: 84%;
		margin: 0 auto;
		padding: 35rpx;
		position: relative;
		top: -230rpx;
		border-radius: 20rpx;

	}

	//分割线
	.line {
		margin: 20rpx 0;
		height: 4px;
		/* 分割线的高度 */
		background-color: #F7F7F7;
		/* 分割线的颜色 */
	}
	.line2 {
		margin: 20rpx 0;
		margin-bottom: 20rpx;
		height: 2px;
		/* 分割线的高度 */
		background-color: #F7F7F7;
		/* 分割线的颜色 */
	}
	

	.info-title {
		margin-top: 15rpx;
		margin-bottom: 15rpx;
		display: flex;
		justify-content: space-between;
	}

	// 订单信息展示的内容
	.info-content {
		margin-bottom: 20rpx;
		font-size: 28rpx;
		color: #3D3D3D;

	}

	// 底部
	.bottom {
		position: fixed;
		justify-content: space-between;
		bottom: 0rpx;
		width: 100%;
		height: 100rpx;
		display: flex;
		background-color: white;

	}

	.bottom-left,.bottom-right {
		display: flex;
		margin: auto 0;

	}
	.bottom-left{
		margin-left: 25rpx;
	}

	.bottom-left view {
		margin-left: 15rpx;
		line-height: 60rpx;
		color: #232323;
	}

	.bottom-right {
		margin-right: 20rpx;
		justify-content: space-between;

		button {
			padding: 0 30rpx;
			border-radius: 50rpx;
			margin-right: 15rpx;
			width: 200rpx;
			font-size: 26rpx;
			color: white;
		}
	}
	.details-content{
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		margin-bottom: 20rpx;
		color: #3D3D3D;
	}
	.red{
		color: red;
		
		
	}
	.green{
		color: #25CA5B;
		font-size: 30rpx;
	}
</style>